<template >
  <div :class='className' :style="{height:height,width:width}"></div>
</template>

<script>
import * as echarts from 'echarts/core';
import {
    TooltipComponent,
    LegendComponent
} from 'echarts/components';
import {
    PieChart
} from 'echarts/charts';
import {
    CanvasRenderer
} from 'echarts/renderers';

echarts.use(
    [TooltipComponent, LegendComponent, PieChart, CanvasRenderer]
);
//require('echarts/theme/macarons')
import resizeEcharts from '@/utils/resizeEcharts'
const animationDuration =6000
export default {
 mixins:[resizeEcharts],
 props:{
   className:{
     type:String,
     default:'chart'
   },
   width:{
     type:String,
     default:'100%'
   },
   height:{
     type:String,
     default:'200px'
   }
 },
 data(){
   return {
     chart:null,
   }
 },
 mounted(){
   this.$nextTick(()=>{
     this.initChart()
   })
 },
 beforeDestroy(){
   if(!this.chart){
     return 
   }
   this.chart.dispose()
   this.chart=null
 },
 methods:{
   initChart(){
     this.chart=echarts.init(this.$el,'macarons')
     this.chart.setOption({

    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735},
               
            ]
        }
    ]
     })
   }
 }
}
</script>

<style>


</style>